<template>
	<view
		:style="'order:'+item.order+';'+item.css"
		class="box-swiper-list-text">
		<scroll-view scroll-x>
			<view
				class="_for"
				v-for="item in item.list"
				@click="$_to(item.url)">
				<view class="_for-image">
					<image :src="item.backgroundImage" mode="widthFix"></image>
				</view>
				<view class="_for-mask"></view>
				<view class="_for-info">
					<view class="h1">{{item.title}}</view>
					<view class="p">{{item.describe}}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name:"box-swiper-list-text",
		props:{
			item:{
				type:Object,
				default:null
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
.box-swiper-list-text{
	padding: 25rpx;
	scroll-view{
		white-space: nowrap;
		._for{
			display: inline-block;
			position: relative;
			width: 500rpx;
			height: 250rpx;
			margin: 0 25rpx 0 0;
			overflow: hidden;
			._for-image{
				width: 500rpx;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				background-color:rgba(0,0,0,0.5);
				image{
					width: 100%;
					display: block;
				}
			}
		}
		._for:last-child{
			margin-right: 0;
		}
		._for-mask{
			width: 500rpx;
			height: 250rpx;
			background-color:rgba(0,0,0,0.3);
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
		}
		._for-info{
			width: 500rpx;
			height: 250rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 3;
			display: flex;
			justify-content: flex-end;
			flex-flow: column;
			.h1{
				color: #FFF;
				font-size: 32rpx;
				line-height: 32rpx;
				font-weight: bold;
				padding: 0 25rpx 25rpx 25rpx;
				text-shadow: 0 0 1px #000;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.p{
				font-size: 28rpx;
				line-height: 28rpx;
				color: #FFF;
				padding: 0 25rpx 25rpx 25rpx;
				text-shadow: 0 0 1px #000;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}
}
</style>